<template>
    <div class="global-bar-item-container">
        <div class="main-menu-item" v-for="(main, index) in mainMenus" :key="index">
            <router-link :to="main.path">
                <p class="main-menu-context">{{main.context}}</p>
                <div class="sub-menu-item" v-for="(sub, num) in main.subMenus" :key="num">
                    <router-link :to="sub.path" >
                        <p class="sub-menu-context" @click="action(sub.context)">{{sub.context}}</p>
                    </router-link>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import local_vuex from "@guide/js/vuex"

export default {
    props: {
        // 待展示的菜单
        mainMenus: {
            type: Array
        }
    },
    methods: {
        /**
         * 页面跳转
         *  - 退出登录：清空用户信息，并移除 "部门管理" 菜单
         *  - 个人中心：设置当前用户为 "个人中心" 的展示对象，并跳转至 "个人中心"
         * @param {String} context 菜单内容
         */
        action(context) {
            switch(context) {
                case "退出登录": 
                    this.$store.state.user = {sid: ""} 
                    if (local_vuex.state.mainMenus.length === 4) {
                        local_vuex.state.mainMenus.pop()
                    }
                    break
                case "个人中心": 
                    this.$store.state.view.profile.user = this.$store.state.user 
                    break
            }
        }
    }
}
</script>

<style lang="scss">
@import "@guide/scss/item.scss";
</style>